<template>
  <el-card header="标签与备注"
class="form-section sidebar-card">
    <div class="tags-section">
      <div class="tags-label">
客户标签
</div>
      <div class="tags-container">
        <el-tag v-for="tag in tagList"
:key="tag" class="tag-item">
          {{ tag }}
        </el-tag>
        <span v-if="!tagList || tagList.length === 0"
class="empty-text">暂无标签</span>
      </div>
    </div>

    <el-divider />

    <div v-if="data.next_followup_plan"
class="plan-section">
      <div class="plan-label">
下一步跟进计划
</div>
      <div class="plan-content">
        {{ data.next_followup_plan }}
      </div>
    </div>

    <el-divider v-if="data.next_followup_plan && data.remark" />

    <div v-if="data.remark"
class="remark-section">
      <div class="remark-label">
客户备注
</div>
      <div class="remark-content">
        {{ data.remark }}
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { computed, defineProps } from 'vue'

  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
  })

  const tagList = computed(() => {
    if (!props.data.customer_tags) return []
    if (Array.isArray(props.data.customer_tags)) {
      return props.data.customer_tags
    }
    try {
      return JSON.parse(props.data.customer_tags) || []
    } catch {
      return []
    }
  })
</script>

<style scoped>
  .tags-section {
    margin-bottom: 16px;
  }

  .tags-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tag-item {
    margin: 0;
  }

  .empty-text {
    color: #909399;
    font-size: 14px;
  }

  .plan-section,
  .remark-section {
    margin-bottom: 12px;
  }

  .plan-label,
  .remark-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .plan-content,
  .remark-content {
    font-size: 14px;
    color: #303133;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
  }
</style>
